<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['purchase:qgmMstr:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['purchase:qgmMstr:edit']"
        >
          修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="single"
          @click="handleDelete"
          v-hasPermi="['purchase:qgmMstr:remove']"
        >
          删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-check"
          size="mini"
          :disabled="multiple"
          @click="handleUp"
          v-hasPermi="['purchase:qgmMstr:upload']"
        >
          提交
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['purchase:qgmMstr:export']"
        >
          导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['marketing:som:import']"
        >
          预排导入
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <div
          style="
            border: 1px solid white;
            width: 80px;
            height: 28px;
            line-height: 28px;
            display: flex;
          "
        >
          <div
            style="
              margin-top: 6px;
              width: 15px;
              height: 15px;
              border: 1px solid green;
              background-color: green;
              border-radius: 50%;
              margin-right: 10px;
            "
          ></div>
          <span style="display: block; font-size: 14px">未审核</span>
        </div>
      </el-col>
      <el-col :span="1.5">
        <div
          style="
            border: 1px solid white;
            width: 80px;
            height: 28px;
            line-height: 28px;
            display: flex;
          "
        >
          <div
            style="
              margin-top: 6px;
              width: 15px;
              height: 15px;
              border: 1px solid #bb0331;
              background-color: #bb0331;
              border-radius: 50%;
              margin-right: 10px;
            "
          ></div>
          <span style="display: block; font-size: 14px">已审核</span>
        </div>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <!--    头表TAB-->
    <el-table
      highlight-current-row
      v-loading="loading"
      :data="qgmMstrList"
      border
      stripe
      :height="tableH"
      :cell-style="iCellStyle"
      @scrollBottom="load"
      @selection-change="handleSelectionChange"
      @row-click="clickQgdDet"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="#" type="index" width="40" align="center" />
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="请购单号"
        :show-overflow-tooltip="true"
        align="center"
        prop="qgmDjbh"
      />
      <el-table-column
        label="客户"
        :show-overflow-tooltip="true"
        align="center"
        prop="qgmKhdm"
      >
        <template #default="scope">
          <dict-tag :options="allCustomerOptions" :value="scope.row.qgmKhdm" />
        </template>
      </el-table-column>
      <el-table-column
        label="需求日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="qgmXqrq"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.qgmXqrq, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="单据状态"
        :show-overflow-tooltip="true"
        align="center"
        prop="qgmZtbz"
      >
        <template #default="scope">
          <dict-tag :options="ZtbzOptionss" :value="scope.row.qgmZtbz" />
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        :show-overflow-tooltip="true"
        align="center"
        prop="qgmDesc"
      />
      <el-table-column
        label="建立人员"
        :show-overflow-tooltip="true"
        align="center"
        prop="qgmJlry"
      />
      <el-table-column
        label="建立日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="qgmJlrq"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.qgmJlrq, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="审核人员"
        :show-overflow-tooltip="true"
        align="center"
        prop="qgmShry"
      />
      <el-table-column
        label="审核日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="qgmShrq"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.qgmShrq, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleChildren(scope.row)"
            v-hasPermi="['purchase:qgmMstr:remove']"
            :disabled="scope.row.qgmZtbz != '0'"
          >
            添加物料
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 子表TAB-->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="请购明细" name="first">
        <el-table
          :data="qgdDetList"
          border
          stripe
          :height="tableHChild"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="#" width="40" align="center" />
          <el-table-column label="销售单号" align="center" prop="qgdSodh" />
          <el-table-column label="物料代码" align="center" prop="qgdWldm" />
          <el-table-column label="代用物料" align="center" prop="qgdDywl" />
          <el-table-column
            label="品名规格"
            show-overflow-tooltip
            align="center"
            prop="itmPmgg"
          />
          <el-table-column label="采购属性" align="center" prop="qgdCgsx">
            <template #default="scope">
              <dict-tag :options="CgsxOptionss" :value="scope.row.qgdCgsx" />
            </template>
          </el-table-column>
          <el-table-column label="最小包装" align="center" prop="qgdMinbz" />
          <el-table-column label="请购数量" align="center" prop="qgdQgsl" />
          <el-table-column
            label="单位"
            :show-overflow-tooltip="true"
            width="60"
            align="center"
            prop="itmDw"
          >
            <template #default="scope">
              <dict-tag :options="unitFlagOptions" :value="scope.row.itmDw" />
            </template>
          </el-table-column>
          <el-table-column label="建立人员" align="center" prop="qgdJlry" />
          <el-table-column
            label="建立日期"
            :show-overflow-tooltip="true"
            align="center"
            prop="qgdJlrq"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.qgdJlrq, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物料备注" align="center" prop="qgdDesc" />
          <el-table-column
            label="操作"
            align="center"
            width="120"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleQgdDelete(scope.row)"
                :disabled="childDisabled"
                v-hasPermi="['purchase:qgmMstr:remove']"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="请购统计" name="second">
        <el-table
          :data="qgdDetCountList"
          :height="tableHChild"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="#" width="40" align="center" />
          <el-table-column label="物料代码" align="center" prop="qgdWldm" />
          <el-table-column label="代用物料" align="center" prop="qgdDywl" />
          <el-table-column
            label="品名规格"
            show-overflow-tooltip
            align="center"
            prop="itmPmgg"
          />
          <el-table-column label="采购属性" align="center" prop="qgdCgsx">
            <template #default="scope">
              <dict-tag :options="CgsxOptionss" :value="scope.row.qgdCgsx" />
            </template>
          </el-table-column>
          <el-table-column label="采购属性" align="center" prop="qgdCgsx" />
          <el-table-column label="最小包装" align="center" prop="qgdMinbz" />
          <el-table-column label="请购数量" align="center" prop="qgdQgsl" />
          <el-table-column
            label="单位"
            :show-overflow-tooltip="true"
            width="60"
            align="center"
            prop="itmDw"
          >
            <template #default="scope">
              <dict-tag :options="unitFlagOptions" :value="scope.row.itmDw" />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 查询对话框   -->
    <el-dialog
      :title="title"
      v-model="openSearch"
      :close-on-click-modal="false"
      draggable
      width="550px"
      append-to-body
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="98px"
      >
        <el-col :span="24" style="margin-top: 10px">
          <el-form-item label="请购单号" prop="qgmDjbh">
            <el-input
              v-model="queryParams.qgmDjbh"
              placeholder="请输入请购单号"
              clearable
              style="width: 300px"
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="需求日期" prop="dateRange">
            <el-date-picker
              clearable
              size="small"
              v-model="dateRange"
              style="width: 300px"
              :clearable="false"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="建立人员" prop="qgmZtbz">
            <el-input
              v-model="queryParams.qgmJlry"
              placeholder="请输入建立人员"
              clearable
              style="width: 300px"
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="125px" prop="totalOrder">
            <span slot="label">
              <el-tooltip
                content="综合查询包含物料代码，品名规格，客户编码查询"
                placement="top"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
              综合查询
            </span>
            <el-input
              v-model="queryParams.totalOrder"
              placeholder="请输入物料代码或品名规格或客户编码"
              clearable
              style="width: 280px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="单据状态" prop="qgmZtbz">
            <el-radio-group v-model="queryParams.qgmZtbz">
              <el-radio
                v-for="dict in ZtbzOptions"
                style="width: 110px"
                :key="dict.dictValue"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            style="margin-top: 15px; display: flex; justify-content: flex-end"
          >
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>

    <!-- 添加或修改生产请购单申请对话框 -->
    <el-dialog
      :title="title"
      v-model="open"
      :close-on-click-modal="false"
      draggable
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="客户名称" prop="qgmKhdm">
          <el-select v-model="form.qgmKhdm" placeholder="请选择客户">
            <el-option
              v-for="dict in customerOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="需求日期" prop="qgmXqrq">
          <el-date-picker
            clearable
            size="small"
            v-model="form.qgmXqrq"
            type="date"
            :clearable="false"
            value-format="yyyy-MM-dd"
            placeholder="选择需求日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="订单备注" prop="remark">
          <el-input
            type="textarea"
            v-model="form.qgmDesc"
            placeholder="请输入订单备注"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加子项对话框   -->
    <el-dialog
      v-model="openChildren"
      :fullscreen="true"
      :close-on-click-modal="false"
      append-to-body
    >
      <!-- 子项搜索条件框-->
      <el-form :model="queryChildParams" :inline="true">
        <el-row style="margin-top: 10px">
          <el-form-item label="销售单号" prop="somDjbh">
            <el-input
              v-model="queryChildParams.somDjbh"
              placeholder="请输入销售单号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label-width="100px" label="物料代码" prop="somWldm">
            <el-input
              v-model="queryChildParams.somWldm"
              placeholder="请输入物料代码"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label-width="100px" label="综合查询" prop="somDesc">
            <el-input
              v-model="queryChildParams.somDesc"
              placeholder="请输入综合查询"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label-width="80px" label="采购属性" prop="qgmCgsx">
            <el-radio-group v-model="queryChildParams.qgmCgsx" size="medium">
              <el-radio
                v-for="(item, index) in qgmCgsxOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-col :span="10">
            <el-form-item label="订单类型" prop="qgmDjType">
              <el-radio-group
                v-model="queryChildParams.qgmDjType"
                size="medium"
              >
                <el-radio
                  v-for="(item, index) in qgmDjTypeOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  @change="radioClick"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料仓库" prop="qgmWlck">
              <el-radio-group v-model="queryChildParams.qgmWlck" size="medium">
                <el-radio
                  v-for="(item, index) in qgmWlckOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="display: flex; justify-content: flex-end">
              <el-button type="primary" @click="allDylQg">代用请购</el-button>
              <el-button type="primary" @click="serachChildren">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--子项数据框-->
      <el-form>
        <el-table
          highlight-current-row
          v-loading="loading"
          :data="serachQgmdetList"
          v-show="question"
          border
          stripe
          :height="tableHChild"
          @row-click="clickdel"
          ref="somCheckTable"
          @scrollBottom="load2"
          @selection-change="handleSelectionChangeC"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column label="#" type="index" width="40" align="center" />
          <el-table-column
            type="selection"
            width="55"
            align="center"
            fixed="left"
          />
          <el-table-column
            fixed="left"
            label="操作"
            align="center"
            width="80"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handeleAllotDyl(scope.row)"
                >代用料分配</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            label="销售单号"
            width="135"
            :show-overflow-tooltip="true"
            align="center"
            prop="somDjbh"
          />
          <el-table-column
            label="物料代码"
            width="135"
            :show-overflow-tooltip="true"
            align="center"
            prop="somWldm"
          />
          <el-table-column
            label="品名规格"
            width="400"
            :show-overflow-tooltip="true"
            prop="itmPmgg"
          />
          <el-table-column
            label="仓库名称"
            width="135"
            :show-overflow-tooltip="true"
            align="center"
            prop="ckmName"
          >
            <template #default="scope">
              <dict-tag
                :options="allStorageOptions"
                :value="scope.row.ckmName"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="采购属性"
            align="center"
            width="100"
            prop="molCgsx"
          >
            <template #default="scope">
              <dict-tag :options="CgsxOptionss" :value="scope.row.molCgsx" />
            </template>
          </el-table-column>
          <el-table-column
            label="订单数量"
            :show-overflow-tooltip="true"
            width="80"
            align="center"
            prop="molDdsl"
          />
          <el-table-column
            label="库存数量"
            :show-overflow-tooltip="true"
            width="80"
            align="center"
            prop="kcmKcsl"
          />
          <el-table-column
            label="单位"
            :show-overflow-tooltip="true"
            width="80"
            align="center"
            prop="itmDw"
          >
            <template #default="scope">
              <dict-tag :options="unitFlagOptions" :value="scope.row.itmDw" />
            </template>
          </el-table-column>
          <el-table-column
            label="单位用量"
            :show-overflow-tooltip="true"
            width="80"
            align="center"
            prop="molDwyl"
          />
          <el-table-column
            label="最小包装"
            :show-overflow-tooltip="true"
            width="80"
            align="center"
            prop="itmMinbz"
          />
          <el-table-column
            label="需求数量"
            :show-overflow-tooltip="true"
            width="80"
            align="center"
            prop="molXqsl"
          />
          <el-table-column
            label="请购数量"
            :show-overflow-tooltip="true"
            width="100"
            align="center"
          >
            <template #default="scope">
              <el-input
                type="number"
                class="inputName"
                style="width: 90px"
                v-model="scope.row.qgdQgsl"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="明细备注"
            :show-overflow-tooltip="true"
            width="100"
            align="center"
            prop="qgdDesc"
          >
            <template #default="scope">
              <el-input
                style="width: 90px"
                v-model="scope.row.qgdDesc"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100"
            align="center"
            fixed="right"
          >
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="rollbackOrder(scope.row)"
                v-if="scope.row.molGgbz == 1"
                >撤回成型</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-table
          highlight-current-row
          v-loading="loading"
          :data="serachQgmdetList"
          v-show="!question"
          stripe
          border
          :height="tableHChild"
          @scrollBottom="load2"
          @selection-change="handleSelectionChangeC"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="物料代码"
            :show-overflow-tooltip="true"
            align="center"
            prop="somWldm"
          />
          <el-table-column
            label="品名规格"
            :show-overflow-tooltip="true"
            align="center"
            prop="itmPmgg"
          />
          <el-table-column
            label="采购属性"
            :show-overflow-tooltip="true"
            align="center"
            prop="molCgsxmc"
          />
          <el-table-column
            label="单位"
            :show-overflow-tooltip="true"
            align="center"
            prop="itmDw"
          >
            <template #default="scope">
              <dict-tag :options="unitFlagOptions" :value="scope.row.itmDw" />
            </template>
          </el-table-column>
          <el-table-column
            label="最小包装"
            :show-overflow-tooltip="true"
            align="center"
            prop="itmMinbz"
          />
          <el-table-column
            label="库存数量"
            :show-overflow-tooltip="true"
            align="center"
            prop="kcmKcsl"
          />
          <el-table-column
            label="请购数量"
            width="100"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="scope">
              <el-input
                type="number"
                class="inputName"
                style="width: 90px"
                v-model="scope.row.qgdQgsl"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="明细备注"
            :show-overflow-tooltip="true"
            width="100"
            align="center"
            prop="qgdDesc"
          >
            <template #default="scope">
              <el-input
                style="width: 90px"
                v-model="scope.row.qgdDesc"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="请购明细" name="first">
            <el-table
              v-loading="loading"
              :data="qgdDetList"
              border
              stripe
              :height="tableHChild"
              @selection-change="handleSelectionChange"
            >
              <el-table-column label="#" width="40" align="center" />
              <el-table-column label="销售单号" align="center" prop="qgdSodh" />
              <el-table-column label="物料代码" align="center" prop="qgdWldm" />
              <el-table-column label="代用物料" align="center" prop="qgdDywl" />
              <el-table-column label="品名规格" align="center" prop="itmPmgg" />
              <el-table-column label="采购属性" align="center" prop="qgdCgsx">
                <template #default="scope">
                  <dict-tag
                    :options="CgsxOptionss"
                    :value="scope.row.qgdCgsx"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="最小包装"
                align="center"
                prop="qgdMinbz"
              />
              <el-table-column label="请购数量" align="center" prop="qgdQgsl" />
              <el-table-column
                label="单位"
                :show-overflow-tooltip="true"
                width="60"
                align="center"
                prop="itmDw"
              >
                <template #default="scope">
                  <dict-tag
                    :options="unitFlagOptions"
                    :value="scope.row.itmDw"
                  />
                </template>
              </el-table-column>
              <el-table-column label="建立人员" align="center" prop="qgdJlry" />
              <el-table-column
                label="建立日期"
                :show-overflow-tooltip="true"
                align="center"
                prop="qgdJlrq"
              >
                <template #default="scope">
                  <span>{{ parseTime(scope.row.qgdJlrq, "{y}-{m}-{d}") }}</span>
                </template>
              </el-table-column>
              <el-table-column label="物料备注" align="center" prop="qgdDesc" />
              <el-table-column
                label="操作"
                align="center"
                width="120"
                class-name="small-padding fixed-width"
              >
                <template #default="scope">
                  <el-button
                    size="mini"
                    type="text"
                    :disabled="childDisabled"
                    @click="handleQgdDelete(scope.row)"
                    v-hasPermi="['purchase:qgmMstr:remove']"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-form-item
          style="margin-top: 25px; display: flex; justify-content: flex-end"
        >
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="handAddChildren">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="请分配代用料"
      v-model="allotDylOpen"
      :close-on-click-modal="false"
      draggable
      width="750px"
      append-to-body
    >
      <el-table
        highlight-current-row
        v-loading="loading"
        :data="allotDylList"
        v-show="question"
        @selection-change="handleSelectionChangeC"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column label="默认代用" align="center" prop="dylDefult">
          <template #default="scope">
            <dict-tag
              :options="dylDefultOptions"
              :value="scope.row.dylDefult"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="代用物料代码"
          :show-overflow-tooltip="true"
          align="center"
          prop="dylWldm"
        />
        <el-table-column
          label="品名规格"
          :show-overflow-tooltip="true"
          align="center"
          prop="dylWldmmc"
        />
        <el-table-column
          label="分配数量"
          :show-overflow-tooltip="true"
          prop="dylDysl"
          align="center"
        >
          <template #default="scope">
            <el-input
              type="number"
              size="mini"
              @input="mathInput"
              :disabled="scope.row.dylDefult === 9"
              v-model="scope.row.dylDysl"
            />
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAllotDyl">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="upload.title"
      v-model="upload.open"
      :close-on-click-modal="false"
      width="400px"
      draggable
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
            >下载模板</el-link
          >
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upload.open = false">取 消</el-button>
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listQgmMstr,
  getQgmMstr,
  delQgmMstr,
  addQgmMstr,
  updateQgmMstr,
  exportQgmMstr,
  listSearchCld,
  insertQgdDet,
  listQgdDet,
  getQgdCount,
  delQgd,
  allDylQgs,
  getAllotDyl,
  submitDyl,
  submitQgmMstr,
  rollbackOrder,
} from "@/api/purchase/qgmMstr";
import {
  getAllCustomer,
  getAllCustomerTwo,
  getCustomer,
} from "@/api/project/customer";
import { getAllCgList } from "@/api/project/mstr";
import { getAll } from "@/api/repertory/Storage";
import { getToken } from "@/utils/auth";
import { exportMtpExample } from "@/api/money/mtpMstr";
import { importSomMstr } from "@/api/marketing/som";

export default {
  name: "QgmMstr",
  data() {
    return {
      // 遮罩层
      loading: true,
      numberDyl: null,
      question: true,
      tableH:
        document.body.clientHeight > 900
          ? document.body.clientHeight / 2 - 96
          : document.body.clientHeight / 2 - 108,
      tableHChild: document.body.clientHeight / 2 - 150,
      // 导出遮罩层
      exportLoading: false,
      //默认子表
      activeTab: "first",
      // 选中数组
      ids: [],
      clickDatas: [],
      qgmDjbhc: null,
      childqgmDjbh: null,
      // 日期范围
      dateRange: [
        this.moment().startOf("month").format(),
        this.moment().endOf("month").format(),
      ],
      // 非单个禁用
      single: true,
      childDisabled: true,
      //总值
      totalDyl: null,
      totalBom: null,
      addNum: null,
      //多选数据
      selectRows: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      openSearch: false,
      // 总条数
      total: 0,
      total2: 0,
      // 生产请购单申请表格数据
      qgmMstrList: [],
      // 生产请购子项表格数据
      qgdDetList: [],
      qgdDetCountList: [],
      //生产请购单子项数据集合
      serachQgmdetList: [],
      qgmdetList: [],
      //客户类型
      customerOptions: [],
      allCustomerOptions: [],
      //单位字典
      unitFlagOptions: [],
      //采购属性字典‘
      CgsxOptionss: [],
      //所有仓库名称字典
      allStorageOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示代用料分配弹出层
      allotDylOpen: false,
      // 分配代用料List
      allotDylList: [],
      allotmolId: null,
      allotQgsl: 0,
      dylDefultOptions: [
        { dictLabel: "默认代用料", dictValue: "1" },
        { dictLabel: "代用料", dictValue: "0" },
        {
          dictLabel: "Bom物料",
          dictValue: "9",
        },
      ],
      //是否显示子项弹出层
      openChildren: false,
      // 状态标志字典
      ZtbzOptions: [],
      ZtbzOptionss: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        pageType: 1,
        qgmDjbh: null,
        qgmXqrq: null,
        qgmXqrqEnd: null,
        qgmZtbz: "1",
        qgmJlry: null,
        totalOrder: null,
      },
      // 查询子项参数
      queryChildParams: {
        pageNum: 1,
        pageSize: 20,
        //销售单号
        somDjbh: null,
        //物料代码
        somWldm: null,
        //综合查询
        somDesc: null,
        //订单类型
        qgmDjType: 0,
        //采购属性
        qgmCgsx: 0,
        //物料仓库
        qgmWlck: 0,
      },
      //订单状态类型
      qgmDjTypeOptions: [
        {
          label: "订单请购",
          value: 0,
        },
        {
          label: "非订单请购",
          value: 1,
        },
      ],
      //采购属性类型
      qgmCgsxOptions: [
        {
          label: "调拨",
          value: 1,
        },
        {
          label: "所有",
          value: 0,
        },
      ],
      //物料仓库类型
      qgmWlckOptions: [
        {
          label: "原料",
          value: 1,
        },
        {
          label: "辅料",
          value: 2,
        },
        {
          label: "所有",
          value: 0,
        },
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        qgmKhdm: [{ required: true, message: "客户不能为空", trigger: "blur" }],
        qgmXqrq: [
          { required: true, message: "需求日期不能为空", trigger: "blur" },
        ],
      },

      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/purchase/qgmMstr/walkThrough",
      },
    };
  },
  created() {
    this.getList();

    //所有仓库
    getAll().then((response) => {
      this.allStorageOptions = response.data;
      for (let item of this.allStorageOptions) {
        item.dictLabel = item.storageName;
        item.listClass = "default";
        item.dictValue = item.storageId + "";
      }
    });
    this.getDicts("sys_purchase_state").then((response) => {
      for (let i of response.data) {
        this.ZtbzOptionss.push(i);
      }
      this.ZtbzOptions = response.data;
      const flag = { dictLabel: "新增", dictValue: "0", listClass: "default" };
      this.ZtbzOptionss.push(flag);
    });
    getAllCustomer().then((response) => {
      for (let i of response.data) {
        i.dictLabel = i.cusName;
        i.dictValue = i.cusCode + "";
        i.listClass = "default";
      }
      this.customerOptions = response.data;
    });
    getAllCustomerTwo().then((response) => {
      for (let i of response.data) {
        i.dictLabel = i.cusName;
        i.dictValue = i.cusCode + "";
        i.listClass = "default";
      }
      this.allCustomerOptions = response.data;
    });
    this.getDicts("sys_unit").then((response) => {
      this.unitFlagOptions = response.data;
    });
    //将不是字典的集合转为字典
    getAllCgList().then((response) => {
      this.CgsxOptionss = response.data;
      for (let i of this.CgsxOptionss) {
        i.dictLabel = i.cgName;
        i.dictValue = i.cgId + "";
        i.listClass = "default";
      }
    });
  },
  methods: {
    msgSuccess(msg) {
      this.$message({
        showClose: true,
        message: msg,
        type: "success",
        offset: 1,
        customClass: this.$style["msg-success"],
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openSearch = false;
      this.openChildren = false;
      // this.serachQgmdetList = []
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        qgmId: null,
        qgmDjbh: null,
        qgmKhdm: null,
        qgmXqrq: new Date(),
        qgmZtbz: null,
        qgmDesc: null,
        qgmJlry: null,
        qgmJlrq: null,
        qgmShry: null,
        qgmShrq: null,
      };
      this.resetForm("form");
    },
    radioClick(a) {
      if (a === 1) {
        this.question = false;
        this.serachQgmdetList = [];
      } else if (a === 0) {
        this.question = true;
        this.serachQgmdetList = [];
      }
    },
    iCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      //未审核
      if (row.qgmZtbz === 1) {
        return "padding:0px 0;color:green";
      }
      //已审核
      else if (row.qgmZtbz === 2) {
        return "padding:0px 0;color:#bb0331";
      }
    },
    //点击单据 查看详细表
    clickQgdDet(row) {
      if (row.qgmZtbz !== null && row.qgmZtbz !== undefined)
        this.childDisabled = row.qgmZtbz != 0;
      this.childqgmDjbh = row.qgmDjbh;
      listQgdDet(row.qgmDjbh).then((response) => {
        this.qgdDetList = response.data.detail;
        this.qgdDetCountList = response.data.count;
      });
    },
    //删除请购明细
    handleQgdDelete(row) {
      const qgdId = row.qgdId;
      const qgdMolid = row.qgdMolid;
      const qgmDjbh = { qgmDjbh: row.qgdDjbh };
      listQgmMstr(qgmDjbh).then((res) => {
        if (res.rows[0].qgmZtbz != "0") {
          this.msgError(
            "请购单号: [" +
              res.rows[0].qgmDjbh +
              "]不是新增状态,无法删除该单据明细数据~"
          );
          return;
        } else {
          this.$confirm("确认删除此项?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              return delQgd(qgdId, qgdMolid);
            })
            .then(() => {
              const rows = {
                qgmDjbh: row.qgdDjbh,
                qgmZtbz: res.rows[0].qgmZtbz,
              };
              this.clickQgdDet(rows);
              this.msgSuccess("删除成功");
            })
            .catch(() => {});
        }
      });
    },
    /** 查询生产请购单申请列表 */
    getList(row) {
      this.queryParams.qgmXqrq = null;
      this.queryParams.qgmXqrqEnd = null;
      if (this.dateRange !== null) {
        this.queryParams.qgmXqrq = this.moment(this.dateRange[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.queryParams.qgmXqrqEnd = this.moment(this.dateRange[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.loading = true;
      this.queryParams.pageNum = 1;
      listQgmMstr(this.queryParams).then((response) => {
        this.qgdDetList = [];
        this.qgdDetCountList = [];
        this.qgmMstrList = [];
        this.qgmMstrList = this.qgmMstrList.concat(response.rows);
        this.total = response.total;
        this.loading = false;
        if (row != null) {
          this.clickQgdDet(row);
        } else if (this.qgmMstrList != null && this.qgmMstrList.length > 0) {
          this.clickQgdDet(this.qgmMstrList[0]);
        }
      });
    },
    load() {
      if (
        this.queryParams.pageNum <
        Math.ceil(this.total / this.queryParams.pageSize)
      ) {
        // this.$message.success("加载下一页");
        this.queryParams.pageSize = 20;
        this.queryParams.pageNum++;
        listQgmMstr(this.queryParams).then((response) => {
          this.qgmMstrList = this.qgmMstrList.concat(response.rows);
          this.total = response.total;
          this.loading = false;
        });
      }
      return 0;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.qgmMstrList = [];
      this.getList();
      this.openSearch = false;
    },
    /** 搜索子项数据 */
    serachChildren() {
      this.queryChildParams.pageNum = 1;
      this.serachQgmdetList = [];
      listSearchCld(this.queryChildParams).then((response) => {
        this.serachQgmdetList = [];
        this.serachQgmdetList = this.serachQgmdetList.concat(response.rows);
        const row = { qgmDjbh: this.qgmDjbhc };
        this.clickQgdDet(row);
        this.total2 = response.total;
        this.loading = false;
      });
    },
    load2() {
      if (
        this.queryChildParams.pageNum <
        Math.ceil(this.total2 / this.queryChildParams.pageSize)
      ) {
        // this.$message.success("加载下一页");
        this.queryChildParams.pageSize = 20;
        this.queryChildParams.pageNum++;
        listSearchCld(this.queryChildParams).then((response) => {
          this.serachQgmdetList = this.serachQgmdetList.concat(response.rows);
          this.total2 = response.total;
        });
      }
      return 0;
    },
    /** 一键代用 请购 */
    allDylQg() {
      const moeIds = this.serachQgmdetList.map((item) => item.molId);
      // console.log(moeIds)
      allDylQgs(moeIds, this.qgmDjbhc).then((response) => {
        this.msgSuccess("批量添加成功");
        const row = { qgmDjbh: this.qgmDjbhc };
        this.clickQgdDet(row);
        this.serachChildren();
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.qgmId);
      this.clickDatas = selection;
      this.qgmDjbhc = selection.map((item) => item.qgmDjbh);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    clickdel(row) {
      this.$refs.somCheckTable.toggleRowSelection(row);
    },
    //多选选中子项数据
    handleSelectionChangeC(selection) {
      this.selectRows = selection;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加生产请购单申请";
    },
    /** 添加按钮操作 */
    handAddChildren() {
      let index = 0;
      if (this.selectRows.length <= 0) {
        this.msgError("请勾选需要申请的物料~");
        return;
      } else {
        for (let i of this.selectRows) {
          if (i.qgdQgsl <= 0) {
            this.msgError("请输入申请的数量~");
            return;
          }
          this.selectRows[index++].qgdDjbh = this.qgmDjbhc;
        }
        insertQgdDet(this.selectRows).then((response) => {
          this.msgSuccess("新增成功");
          this.serachChildren();
        });
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const qgmId = row.qgmId || this.ids;
      getQgmMstr(qgmId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改生产请购单申请";
      });
    },
    handleSearch() {
      this.reset();
      this.title = "查询生产请购单";
      this.openSearch = true;
    },
    /** 添加子项 按钮 */
    handleChildren(row) {
      this.qgmDjbhc = row.qgmDjbh;
      this.openChildren = true;
      this.serachChildren();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.qgmId != null) {
            updateQgmMstr(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addQgmMstr(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 提交操作按钮 */
    handleUp() {
      this.$confirm('是否确认提交生产请购单"' + this.qgmDjbhc + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return submitQgmMstr(this.qgmDjbhc);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("成功~");
        })
        .catch(() => {});
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      for (let i of this.clickDatas) {
        if (i.qgmZtbz != 0) {
          this.msgError("单据:【" + i.qgmDjbh + "】已审核,无法删除");
          return;
        }
      }
      const qgmIds = row.qgmId || this.ids;
      this.$confirm('是否确认删除生产请购单"' + this.qgmDjbhc + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return delQgmMstr(qgmIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 得到代用料信息
    handeleAllotDyl(row) {
      this.allotmolId = row.molId;
      this.allotQgsl = row.molXqsl;
      const data = {
        dylDysl: row.molXqsl,
        dylWldm: row.somWldm,
        dylDefult: "9",
        dylWldmmc: row.itmPmgg,
      };
      this.totalDyl = data.dylDysl;
      getAllotDyl(row.molId).then((response) => {
        this.allotDylList = response.data;
        this.allotDylList.push(data);
        const row = { qgmDjbh: this.qgmDjbhc };
        this.clickQgdDet(row);
        if (this.allotDylList.length > 1) {
          this.allotDylOpen = true;
        } else {
          this.msgError("未找到该明细的代用物料~");
        }
      });
    },
    //输入框改变事件
    mathInput(a) {
      let num = this.totalDyl;
      let addNums = 0;
      for (const item of this.allotDylList) {
        if (item.dylDefult == 9) {
          num = num - addNums;
          item.dylDysl = num;
        } else {
          if (item.dylDysl != null) {
            addNums = this.$math.add(addNums, item.dylDysl).internal;
            if (num < addNums) {
              this.msgError("代用分配数量不得超过所需用量~");
              addNums = this.$math.sub(addNums, item.dylDysl).internal;
              item.dylDysl = 0;
            }
          }
        }
      }
    },
    //分配代用料确定按钮
    submitAllotDyl() {
      let dyList = [];
      for (let i of this.allotDylList) {
        if (i.dylDysl > 0) {
          dyList.push(i);
        }
      }
      const data = {
        dylLists: dyList,
        allotmolId: this.allotmolId,
        qgmDjbhc: this.qgmDjbhc,
      };
      submitDyl(data).then((response) => {
        this.allotDylOpen = false;
        this.allotDylList = [];
        this.allotmolId = null;
        this.serachChildren();
        this.msgSuccess("成功~");
        this.serachChildren();
      });
    },
    // 撤回成型
    rollbackOrder(row) {
      this.$confirm("是否确认撤回成型【" + row.somDjbh + "】?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return rollbackOrder(row.molId);
        })
        .then(() => {
          this.serachChildren();
          this.msgSuccess("撤回成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有生产请购单申请数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return exportQgmMstr(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },

    handleImport() {
      this.upload.title = "固定资产信息导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      exportMtpExample().then((response) => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
  },
};
</script>

<style lang="scss" module>
.inputName > .el-input__inner {
  height: 20px;
  line-height: 20px;
}

.el-dialog__body {
  padding: 0px 20px;
}
.msg-success {
  padding: 10px;
}
</style>
